<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title>淘淘游-修改信息</title>
		<link href="css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" type="text/css" href="css/mui.picker.min.css">
		<style>
			.mui-bar-nav~.mui-content{
		    		padding-top: 60px;
		    	}
		    	.mui-info{
		    		text-align: center;
		    		padding: 10px 0px;
		    		background: #fff;
		    	}
		    	.mui-info .mui-user-photo{
					width: 60px;
					height: auto;
					border-radius: 50%;
					vertical-align: middle;
				}
				.mui-info .mui-user-word{
					padding: 10px;
					font-size: 16px;
					color: #00B281;
				}
				.mui-info .mui-user-info-list{
					text-align: left;
					list-style: none;
					padding: 0px 15px;
				}
				.mui-info .mui-user-info-list li{
					/*border-bottom: 1px dashed #00B281;*/
				}
				.mui-info .mui-user-info-list span{
					color: #00B281;
				}
				.mui-info .mui-user-info-list label{
					width: 30%;
				}
				.mui-info .mui-user-info-list input{
					margin: 0;
					height: 44px;
					width: 69.9999%;
					border-bottom: 1px dashed #00B281;
					padding-left: 15px;
				}
				.mui-input-row .mui-input-clear~.mui-icon-clear, .mui-input-row .mui-input-speech~.mui-icon-speech{
					height: 20px;
					top: 10px;
				}
				.mui-input-group .mui-input-row:after{
					background-color: #fff;
				}
				.mui-input-group:before,.mui-input-group:after{
					background-color: #fff;
				}
				#set-info{
					display: block;
					width: 40px;
					height: 40px;
					line-height: 40px;
					border-radius: 50%;
					border: 1px solid #00B281;
					margin: 0 auto;			
					color: #00B281;
				}
				#set-info span{
					font-size: 30px;
				}
		</style>
	</head>

	<body>
		<!--单页面开始-->
		<div id="info" class="mui-page">
			<!--页面标题栏开始-->
			<div class="mui-navbar-inner mui-bar mui-bar-nav">
				<button type="button" class="mui-left mui-action-back mui-btn  mui-btn-link mui-btn-nav mui-pull-left">
					取消
				</button>
				<h1 class="mui-center mui-title">修改信息</h1>
				<button id="btn-save-Info" type="button" class="mui-btn  mui-btn-link mui-btn-nav mui-pull-right">
					保存
				</button>
			</div>
			<form class="mui-content mui-info" id="form-info">
				<img class="mui-user-photo" src="images/girl/girl-18.png" />
				<p class="mui-user-word">淘游满天下 欢乐溢苍穹</p>
				<ul class="mui-user-info-list">
					<li class="mui-input-row">
						<label><span class="mui-icon mui-icon-person"></span> 姓名</label>
						<input class="mui-input-clear" type="text" name="user-name" id="user-name" value="陈景芝" />
					</li>
					<li class="mui-input-row">
						<label><span class="mui-icon mui-icon-paperclip"></span> 年龄</label>
						<input class="mui-input-clear" type="text" name="user-age" id="user-age" value="26" />
					</li>
					<li class="mui-input-row">
						<label><span class="mui-icon mui-icon-paperplane"></span> 性别</label>
						<input class="mui-input-clear" type="text" name="user-sex" id="user-sex" value="女" />
					</li>
					<li class="mui-input-row">
						<label><span class="mui-icon mui-icon-phone"></span> 手机</label>
						<input class="mui-input-clear" type="text" name="user-phone" id="user-phone" value="13437109999" />
					</li>
					<li class="mui-input-row">
						<label><span class="mui-icon mui-icon-email"></span> 邮箱</label>
						<input class="mui-input-clear" type="text" name="user-emai" id="user-emai" value="1303155999@qq.com" />
					</li>
					<li class="mui-input-row">
						<label><span class="mui-icon mui-icon-star"></span> 生日</label>
						<input type="text" id="user-birthday" name="user-birthday" value="1991-04-23"/>
					</li>
				</ul>
			<form>
		</div>
		<script src="js/mui.min.js"></script>
		<script src="js/mui.picker.min.js"></script>
		<script type="text/javascript" charset="UTF-8">
			(function($, doc) {
	      		mui.init();
	      		var formInfo = doc.getElementById('form-info');
				var userBirthday=doc.getElementById('user-birthday');
				userBirthday.addEventListener('click', function() {
					var options={
						"type":"date"
					};
					var picker = new $.DtPicker(options);
					picker.show(function(result) {
						userBirthday.value = result.text;
						picker.dispose();
					});
				});
	    	})(mui, document);
		</script>
	</body>

</html>